<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>02.layui栅格系统</title>
        <link rel="stylesheet" href="static/layui-2.5.6/css/layui.css">
    </head>
    <body>
        <!-- layui-fuild: 容器显示100%的尺寸 -->
        <div class="layui-fuild">
            <!-- layui-row: 放在行内 -->
            <div class="layui-row">
                <div class="layui-col-lg2">
                    <div class="layui-side-scroll">
                        <!-- 垂直导航 -->
                        <ul class="layui-nav layui-nav-tree" style="width:100%; ">
                            <li class="layui-nav-item"><a href="">李白</a></li>
                            <li class="layui-nav-item">
                                <a href="">杜甫</a>
                                <dd class="layui-nav-child">
                                    <dl><a href="">兵车行</a></dl>
                                    <dl><a href="">春日思李白</a></dl>
                                </dd>
                            </li>
                            <li class="layui-nav-item"><a href="">今夜大三浪</a></li>
                        </ul>
                    </div>
                </div>
                <div class="layui-col-lg10">
                        <div style="padding-left: 10px;">hello world</div>
                </div>
            </div>
        </div>

        <script src="static/layui-2.5.6/layui.js"></script>
        <script>
            // 一般直接写在一个js文件中
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer,
                    form = layui.form;
            });
        </script>
    </body>
</html>
